<template>
  <el-page-header
    @back="goBack"
    class="mb-15"
    :class="{ 'mx-15': useLocale.isMob }"
  >
    <template #content>
      <span> 与({{ name }})聊天记录 </span>
    </template>
  </el-page-header>

  <div class="box-card" v-if="useLocale.isMob">
    <div class="mx-15">
      <el-tabs
        type="border-card"
        v-model="ruleForm.reply_type"
        style="width: 100%"
      >
        <el-tab-pane label="回覆文本" name="text">
          <el-input
            v-model="ruleForm.reply_message"
            type="textarea"
            :autosize="{ minRows: 2 }"
          />
          <div class="text-tips-color font-sm mt-1">請輸入回覆內容</div>
        </el-tab-pane>
        <el-tab-pane label="回覆素材" name="material">
          <div class="avatar-uploader">
            <div v-if="ruleForm.m_id">
              <material-temp :info="tableData"></material-temp>
              <div class="flex justify-end mt-1">
                <el-button type="danger" size="small" plain @click="delMaterial"
                  >删除</el-button
                >
              </div>
            </div>
            <div v-else>
              <el-icon class="avatar-uploader-icon" @click="openMaterial"
                ><Plus
              /></el-icon>
              <div class="text-tips-color font-sm mt-1">請選擇回覆素材</div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="flex justify-end mt-1">
        <el-button type="primary" @click="submitForm()"> 发送 </el-button>
      </div>
    </div>
    <div class="mob-list mt-2">
      <el-scrollbar ref="scrollbarRef" class="scroll">
        <div
          class="mob-list-item text-content-color font"
          v-for="(item, index) in tableData1"
        >
          <div class="flex align-center mb-1">
            <el-avatar
              class="ml-1"
              shape="circle"
              :size="60"
              fit="fill"
              :src="item.user_img"
            />
            <div class="flex-1 ml-15">
              <div class="flex justify-between">
                <span class="font-mder text-main-color">{{
                  item.fb_name
                }}</span>
                <span class="primaryColor">{{ item.status }}</span>
              </div>
              <div class="mt font-sm">{{ item.fb_user_id }}</div>
            </div>
          </div>
          <div class="flex justify-between border-bottom py-15">
            <div style="width: 70px">内容</div>
            <span class="flex-1">{{ item.content }}</span>
          </div>
          <div class="flex justify-between py-15">
            <span>时间</span>
            <span>{{ item.time }}</span>
          </div>
        </div>
      </el-scrollbar>
    </div>

    <div v-if="total > params.page_size" class="my-1 flex justify-center">
      <el-pagination
        v-model:current-page="params.current_page"
        v-model:page-size="params.page_size"
        :pager-count="5"
        :small="false"
        :disabled="false"
        :background="true"
        layout="prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
  <el-card class="box-card" shadow="hover" v-else>
    <template #header>
      <div style="width: 400px; margin-left: 200px">
        <el-tabs
          type="border-card"
          v-model="ruleForm.reply_type"
          style="width: 100%"
        >
          <el-tab-pane label="回覆文本" name="text">
            <el-input
              v-model="ruleForm.reply_message"
              type="textarea"
              :autosize="{ minRows: 2 }"
            />
            <div class="text-tips-color font-sm mt-1">請輸入回覆內容</div>
          </el-tab-pane>
          <el-tab-pane label="回覆素材" name="material">
            <div class="avatar-uploader">
              <div v-if="ruleForm.m_id">
                <material-temp :info="tableData"></material-temp>
                <div class="flex justify-end mt-1">
                  <el-button
                    type="danger"
                    size="small"
                    plain
                    @click="delMaterial"
                    >删除</el-button
                  >
                </div>
              </div>
              <div v-else>
                <el-icon class="avatar-uploader-icon" @click="openMaterial"
                  ><Plus
                /></el-icon>
                <div class="text-tips-color font-sm mt-1">請選擇回覆素材</div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="flex justify-end mt-1">
          <el-button type="primary" @click="submitForm()"> 发送 </el-button>
        </div>
      </div>
    </template>
    <el-table :data="tableData1" style="width: 100%">
      <el-table-column label="头像" align="center" width="150">
        <template #default="scope">
          <el-image
            style="width: 100px"
            :src="scope.row.user_img"
            fit="contain"
          />
        </template>
      </el-table-column>
      <el-table-column label="名称/ID" align="center" width="200">
        <template #default="scope">
          <div class="flex flex-column align-center">
            <div>{{ scope.row.fb_name }}</div>
            <div class="mt">{{ scope.row.fb_user_id }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="内容" />
      <el-table-column prop="status" label="状态" width="100" />
      <el-table-column prop="time" label="时间" width="120" />
    </el-table>
    <div v-if="total > params.page_size" class="mt-2 flex justify-center">
      <el-pagination
        v-model:current-page="params.current_page"
        v-model:page-size="params.page_size"
        :page-sizes="[20, 40, 60]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="total, sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
  <el-dialog
    v-model="dialogVisible"
    title="选择素材"
    class="mydialog"
    destroy-on-close
    top="5vh"
    :fullscreen="fit.fullscreen"
  >
    <material></material>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirm"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted,nextTick } from "vue";
import { $dialogList, $sendMsg } from "@api/setting";
import { $searchMaterial } from "@api/common";
import { Search, Setting, Plus } from "@element-plus/icons-vue";
import { useLocaleStore } from "@/store/locales";
import { useCommonStore } from "@/store/common";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const router = useRouter();
const route = useRoute();
const useLocale = useLocaleStore();
const useCommon = useCommonStore();
const name = ref(route.query.fb_name);
const dialogVisible = ref(false);
const scrollbarRef = ref(); //滚动条名称
const total = ref(0);
const tableData1 = ref([]);
const tableData = ref({});
let fit = reactive({
  fullscreen: false,
});
let params = ref({
  fb_user_id: "",
  fb_account_id: "",
  current_page: 1,
  page_size: 10,
});
const ruleForm = reactive({
  fb_user_id: "",
  fb_account_id: "",
  m_id: "",
  reply_type: "text",
  reply_message: "",
});
if (useLocale.isMob) {
  fit.fullscreen = true;
} else {
  fit.fullscreen = false;
}
onMounted(() => {
  getData();
});

const getData = async () => {
  params.value.fb_user_id = route.query.fb_user_id;
  params.value.fb_account_id = route.query.fb_account_id;
  ruleForm.fb_user_id = route.query.fb_user_id;
  ruleForm.fb_account_id = route.query.fb_account_id;
  let res = await $dialogList(params.value);
  console.log(res);
  if (res.code == 0) {
    tableData1.value = res.data.table;
    total.value = res.data.total;
      if (useLocale.isMob) {
      nextTick(() => {
        scrollbarRef.value.setScrollTop(0);
      });
    }
  }
};
const handleSizeChange = (val: number) => {
  params.value.page_size = val;
  getData();
};
const handleCurrentChange = (val: number) => {
  params.value.current_page = val;
  getData();
};

const getMaterial = async () => {
  const res = await $searchMaterial({ m_id: ruleForm.m_id });
  tableData.value = res.data;
};

const delMaterial = () => {
  ruleForm.m_id = "";
};
const submitForm = async () => {
  if (ruleForm.reply_type == "text") {
    ruleForm.m_id = "";
  } else {
    ruleForm.reply_message = "";
  }
  const res = await $sendMsg(ruleForm);
  if (res.code == 0) {
    ElMessageBox.alert(res.msg, "提示", {
      confirmButtonText: "OK",
      type: "success",
      "show-close": false,
      callback: (action) => {
        getData();
      },
    });
  } else {
    ElMessageBox.alert(res.msg, "提示", {
      confirmButtonText: "OK",
      type: "error",
      "show-close": false,
    });
  }
};
const confirm = () => {
  ruleForm.m_id = useCommon.mSelected.m_id;
  tableData.value = useCommon.mSelected;
  dialogVisible.value = false;
};

const openMaterial = () => {
  dialogVisible.value = true;
};

const refreshPage = () => {
  //location.reload();
  const currentRoute = router.currentRoute.value;
  console.log(currentRoute.name);
  //router.replace(currentRoute);
  router.replace({ name: currentRoute.name });
};
const goBack = () => {
  router.push({
    path: "/setting/messageKf",
  });
};
</script>
<style>
.mydialog {
  .el-dialog__body {
    padding: 0 var(--el-dialog-padding-primary);
  }
}


</style>
<style lang="scss" scoped>

.box-card {
  display: inherit;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 20px;

}
.avatar-uploader {
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
  .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    &:hover {
      border: 1px dashed var(--el-color-primary);
    }
  }
}
.mob-list {
  .mob-list-item {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
  }
  .desc-item {
    padding: 15px 0;
    border-bottom: 1px solid #ebeef5;
  }
}
.scroll {
  height: calc(100vh - 220px);
}
.ec2-btncon {
  display: flex;
  flex-direction: column;
}
.primaryColor {
  color: var(--el-color-primary);
}
</style>
